<template>
	<view>
		<view class="white-bg" v-if="show">
			<!-- #ifdef MP-WEIXIN -->
			<view class="sys-head" :style="{ height: statusBarHeight }"></view>
			<!-- #endif -->
			<view class="list">
				<view class="acea-row row-middle item" :class="'item'+index" v-for="(item,index) in cateList" :key="index" @click="toPages(item)">
					<view class="image">
						<image :src="item.image" mode=""></image>
					</view>
					<view :class="['info','info-color0'+index]">
						<view class="name">{{item.name}}</view>
						<view class="text">{{item.text}}</view>
					</view>
					<view class="arrow"><image :src="item.arrow" mode=""></image></view>
				</view>
			</view>
			<view class="acea-row row-middle close" @click="toIndex">
				<image src="@/static/images/release/close.png" mode=""></image>
			</view>
		</view>
		<tabBar :pagePath="'/pages/releaseInformation/releaseInformation'"></tabBar>
	</view>
</template>

<script>
	var statusBarHeight = (uni.getSystemInfoSync().statusBarHeight+25) + 'px';
	console.log(statusBarHeight) 
	import tabBar from "@/components/tabBar";
	export default {
		components: {
			tabBar,
		},
		data() {
			return {
				statusBarHeight: statusBarHeight,
				show:false,
				cateList:[
					{
						name:'出租、转让、求租',
						text:'商铺、房屋、写字楼、公寓、厂房、仓库、土地',
						image:'/static/images/release/text_01.png',
						arrow:'/static/images/release/arrow_01.png',
						path:'/pages/releases/subletOfShop/subletOfShop'
					},{
						name:'出售、求购、投资',
						text:'商铺、房屋、写字楼、公寓、厂房、仓库、土地',
						image:'/static/images/release/text_02.png',
						arrow:'/static/images/release/arrow_02.png',
						path:'/pages/releases/subletOfShop/subletOfShop?type=3'
					},{
						name:'二手闲置',
						text:'物品交换、出售、求购',
						image:'/static/images/release/text_03.png',
						arrow:'/static/images/release/arrow_03.png',
						path:'/pages/releases/unused/unused'
					},{
						name:'商家服务',
						text:'加入商家服务、找服务商',
						image:'/static/images/release/text_04.png',
						arrow:'/static/images/release/arrow_04.png',
						path:'/pages/releases/merchantService/merchantService?categoryOn=0'
					},{
						name:'招工信息',
						text:'找工人、找工作',
						image:'/static/images/release/text_05.png',
						arrow:'/static/images/release/arrow_05.png',
						path:'/pages/releases/merchantService/merchantService?categoryOn=6'
					},{
						name:'品牌发布',
						text:'品牌入驻、申请加盟',
						image:'/static/images/release/text_06.png',
						arrow:'/static/images/release/arrow_06.png',
						path:'/pages/releases/brandCorrelation/brandCorrelation'
					},{
						name:'供应链发布',
						text:'加入供应链、找供应链',
						image:'/static/images/release/text_07.png',
						arrow:'/static/images/release/arrow_07.png',
						path:'/pages/releases/supplyChain/supplyChain'
					}
				]
			};
		},
		onShow() {
			this.show=true
		},
		methods:{
			toPages(item){
				uni.navigateTo({
					url:item.path
				})
			},
			toIndex(){
				this.show=false
				uni.switchTab({
					url:'/pages/index/index',
					fail: () => {
						uni.reLaunch({
							url:'/pages/index/index'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.white-bg{
	width: 100%;
	height: 100vh;
	background: #ffffff;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1999;
}

.list{
	height: 82vh;
	padding: 30rpx;
	overflow-y: scroll;
	.item{
		padding: 36rpx 30rpx;
		position: relative;
		margin-bottom: 32rpx;
		.image{
			width: 70rpx;
			height: 70rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.arrow{
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			top: 50%;
			margin-top: -16rpx;
			right: 30rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.info{
			margin-left: 16rpx;
		}
		.name{
			font-size: 36rpx;
			font-weight: 700;
		}
		.text{
			font-size: 26rpx;
			font-weight: 400;
		}
	}
	.item0{
		background: rgba(252, 76, 88, 1);
		.name{
			color: rgba(255, 255, 255, 1);
		}
		.text{
			color: rgba(255, 235, 235, 1);
		}
	}
	.item1{
		background: rgba(255, 237, 238, 1);
		.name{
			color: rgba(242, 61, 73, 1);
		}
		.text{
			color: rgba(252, 76, 88, 1);
		}
	}
	.item2{
		background: rgba(225, 252, 249, 1);
		.name{
			color: rgba(16, 194, 173, 1);
		}
		.text{
			color: rgba(102, 222, 208, 1);
		}
	}
	.item3{
		background: rgba(242, 244, 255, 1);
		.name{
			color: rgba(98, 113, 209, 1);
		}
		.text{
			color: rgba(88, 103, 211, 1);
		}
	}
	.item4{
		background: rgba(252, 243, 212, 1);
		.name{
			color: rgba(255, 197, 5, 1);
		}
		.text{
			color: rgba(255, 207, 51, 1);
		}
	}
	.item5{
		background: rgba(248, 245, 255, 1);
		.name{
			color: rgba(129, 76, 252, 1);
		}
		.text{
			color: rgba(148, 104, 252, 1);
		}
	}
	.item6{
		background: rgba(227, 248, 255, 1);
		.name{
			color: rgba(48, 197, 247, 1);
		}
		.text{
			color: rgba(70, 205, 250, 1);
		}
	}
	
}

.close{
	width: 88rpx;
	height: 10vh;
	background: #ffffff;
	margin: auto ;
	image{
		width: 88rpx;
		height: 88rpx;
	}
}
</style>
